<section>
    <div class="spinner-wrapper col-lg-12 col-md-12 col-sm-12 col-xs-12" ng-show="vm.isLoading">
        <svg class="spinner-container" viewBox="0 0 44 44">
            <circle class="path" cx="22" cy="22" r="20" fill="none" stroke-width="4"></circle>
        </svg>
    </div>

    <div class="page-header">
        <h2>推荐海淘</h2>
    </div>

    <ul class="list-unstyled">
        <!--class="col-md-4 col-xs-6"-->
        <li ng-repeat="article in vm.articles">
            <div class="main-page-item container-fluid">
                <div class="col-md-2 col-sm-3 col-xs-3 no-padding-left no-padding-right">
                    <h4>
                        <a ui-sref="articles.view({ articleId: article._id })" class="">
                            <img class="main-page-img-size" ng-src="{{article.imgs[0]}}" alt="Ohhh"/>
                        </a>
                    </h4>
                </div>

                <div class="col-md-10 col-sm-9 col-xs-9 no-padding-right">
                    <a ui-sref="articles.view({ articleId: article._id })">
                        <h4 ng-bind="article.title"></h4>
                    </a>
                    <div class="hidden-sm hidden-xs" ng-bind-html="article.content | simplify"></div>

                    <div class="col-md-12 col-sm-12 col-xs-12 no-padding-left">
                        <a ui-sref="articles.view({ articleId: article._id })" class="col-md-12 col-sm-12 col-xs-12 no-padding-left">
                            {{article.store}}&nbsp;&nbsp;查看详情
                        </a>
                    </div>

                    <br>
                    <div class="list-article-footer container-fluid">
                        <div class="btn-group-xs col-md-6 col-sm-6 col-xs-7 no-padding-left no-padding-right list-article-vote pull-left">
                            <button type="button" class="btn btn-default" ng-click="article.clickForUpdateVote(true)" ng-disabled="article.isVoted()">
                                <span class="glyphicon glyphicon-thumbs-up"></span>大爱 {{article.goodVotes}}
                            </button>
                            <button type="button" class="btn btn-default" ng-click="article.clickForUpdateVote(false)" ng-disabled="article.isVoted()">
                                <span class="glyphicon glyphicon-thumbs-down"></span>无爱 {{article.badVotes}}
                            </button>
                        </div>

                        <div class="col-md-6 col-sm-6 col-xs-5 no-padding-left no-padding-right pull-right">
                            <div class="col-md-9 hidden-xs list-article-source ">
                                <span class="list-article-date">{{article.created | date: 'yyyy-MM-dd HH:mm'}}</span>
                            </div>

                            <a ng-href="{{article.outLink}}" target="_blank" rel="nofollow" class="col-md-3 btn btn-danger pull-right">海淘一下</a>
                        </div>
                    </div>

                </div>
            </div>
        </li>
    </ul>

    <div footer-button-more ng-if="vm.showFooter" ng-click="vm.showMore()">
        <button type="button" class="btn btn-sm btn-info btn-block">
            <span class="fa fa-ravelry fa-lg" aria-hidden="true">
                &nbsp;&nbsp;更多...
            </span>
        </button>
    </div>
</section>
